<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ECharts-series-系列图-data</title>
  </head>
  <body>
    <div id="main" style="height: 400px"></div>
    <script src="../libs/echarts-5.3.3.js"></script>
    <script>
      window.onload = function () {
        const myChart = echarts.init(document.getElementById("main"));
        const option = {
          title: {
            text: "ECharts 入门示例",
          },
          tooltip: {},
          xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
          },
          yAxis: {},
          series: [
            {
              name: "销量",
              type: "bar",
              label: {
                show: true,
              },
              // 方式一
              // data: [5, 20, 36, 10, 10, 20],

              // 方式二
              // data: [
              //   // x index, y value
              //   [0, 5],
              //   [1, 20],
              //   [2, 36],
              //   [3, 10],
              //   [4, 10],
              //   [5, 20],
              // ],

              // 方式三-推荐
              // data: [
              //   {
              //     value: 5,
              //     name: "衬衫",
              //     // 数据项名称, 比如pie系列 tooltip 需要用到
              //     // ...
              //   },
              //   { value: 20, name: "羊毛衫" },
              //   { value: 36, name: "雪纺衫" },
              //   { value: 10, name: "裤子" },
              //   { value: 10, name: "高跟鞋" },
              //   { value: 20, name: "袜子" },
              // ],

              // 方式四
              // data: [
              //   {
              //     value: [0, 5], // 数组第一项为x轴值，第二项为y轴值
              //     name: "衬衫", // 数据项名称, 比如pie系列 tooltip 需要用到
              //   },
              //   {
              //     value: [1, 20],
              //     name: "羊毛衫",
              //   },
              //   {
              //     value: [2, 36],
              //     name: "雪纺衫",
              //   },
              //   {
              //     value: [3, 10],
              //     name: "裤子",
              //   },
              //   {
              //     value: [4, 10],
              //     name: "高跟鞋",
              //   },
              //   {
              //     value: [5, 20],
              //     name: "袜子",
              //   },
              // ],

              // 方式五(地理坐标系推荐)
              data: [
                {
                  value: [0, 5, 500], // 第一项为x轴或纬度值，第二项为y或维度轴值，第三项以后为扩展值
                  name: "衬衫", // 数据项名称, 比如pie系列 tooltip 需要用到
                },
                {
                  value: [1, 20, 400],
                  name: "羊毛衫",
                },
                {
                  value: [2, 36, 200],
                  name: "雪纺衫",
                },
                {
                  value: [3, 10, 100],
                  name: "裤子",
                },
                {
                  value: [4, 10, 600],
                  name: "高跟鞋",
                },
                {
                  value: [5, 20, 300],
                  name: "袜子",
                },
              ],
            },
          ],
        };
        myChart.setOption(option);
      };
    </script>
  </body>
</html>
